<template>
	<view class="memberyy">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'会员预约开关'"></Hearder>
		<!-- #endif -->
		<view class="vipaccount">会员账号</view>
		<view class="srvip">
			<input placeholder="请输入会员账号" placeholder-style="color:#999;" v-model="search"/>
		</view>
		<view class="pollingbtn" @click="select">查询</view>
		<view v-if="JSON.stringify(member) !='{}'">
			<view class="vipaccount">查询结果</view>
			<view class="selectinfo">
				<view class="showinfo clearfix">
					<image :src="member.avatarUrl"></image>
					<view>
						<view>{{member.nickName}}</view>
						<view>{{member.phone}}</view>
					</view>
				</view>
				<view class="yuyue">
					<text>预约功能</text>
					<u-switch v-model="checkflag" size="20" inactiveColor="#ccc" activeColor="#0455AD" @change="change"></u-switch>
				</view>
			</view>
			<view class="jinqi">近三日预约记录</view>
			<view class="sub-list">
				<view class="sub-every clearfix" v-for="item in list" :key="item.order_id">
					<image :src="item.goods_image"></image>
					<view>
						<view class="title">{{item.goods_name}}</view>
						<view class="subtime">预约时间:{{item.create_time}}</view>
						<view class="subprice">商品价格：<text>￥{{item.goods_price}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				checkflag:false,
				search:'',
				member:{},
				list:[]
			}
		},
		methods:{
			select(){
				this.request('/search/getMember',{phone:this.search,type:2}).then(res => {
					if(res.data.code==1){
						this.member = res.data.data.member
						this.list = res.data.data.list
						if(res.data.data.member.is_switch==1){
							this.checkflag = true
						}
					}
				})
			},
			change(e) {
				if(e){
					var is_switch = 1
				}else{
					var is_switch = 0
				}
				this.request('/search/toSwitch',{is_switch:is_switch,member_id:this.member.member_id}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
					}else{
						this.$tip(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.memberyy{
		.vipaccount{
			font-size: 28rpx;
			height: 30rpx;
			line-height: 30rpx;
			border-left: 4rpx solid $uni-item-color;
			padding-left: 20rpx;
			margin: 4%;
			font-weight: 800;
		}
		.srvip{
			margin: 0 4%;
			height: 78rpx;
			border: 1rpx solid #eee;
			input{
				font-size: 28rpx;
				height: 100%;
				margin: 0 20rpx;
			}
		}
		.pollingbtn{
			background: $uni-item-color;
			text-align: center;
			line-height: 80rpx;
			height: 80rpx;
			color: #fff;
			margin: 30rpx 4%;
			font-size: 28rpx;
		}
		.selectinfo{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12rpx 4% 34rpx;
			.showinfo{
				image{
					float: left;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				>view{
					float: left;
					margin-left: 18rpx;
					view{
						font-size: 28rpx;
						&:last-of-type{
							font-size: 24rpx;
							color: #999;
							margin-top: 12rpx;
						}
					}
				}
			}
			.yuyue{
				display: flex;
				text{
					font-size: 28rpx;
					margin: 2rpx 22rpx 0 0;
				}
			}
		}
		.jinqi{
			font-size: 28rpx;
			color: #999;
			margin: 0 4% 32rpx;
		}
		.sub-list{
			margin: 0 4%;
			.sub-every{
				margin-bottom: 49rpx;
				image{
					float: left;
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
				>view{
					float: left;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100% - 220rpx);
					height: 200rpx;
					margin-left: 20rpx;
					view{
						font-size: 28rpx;
					}
					.title{
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.subtime{
						color: #999;
					}
					.subprice{
						font-size: 26rpx;
						text{
							font-size: 26rpx;
							color: $uni-text-color;
						}
					}
				}
			}
		}
	}
</style>